<template>
	
	<!-- 搜索  focused-->
	<view class="search " :class={focused:key} lang="wxml">
		<!-- 搜索框 -->
		<view class="input-wrap">
			<input type="text" @focus="focus" :placeholder="info" v-model="val" @input="input" @confirm="confirm">
			<span class="cancle"
				@tap="cancel">取消</span>
		</view>

		<!-- 搜索结果 -->
		<view class="content">
			<!-- 搜索建议的结果 -->
			<scroll-view scroll-y class="result" v-if="show">
				<navigator url='/pages/goods/index' v-for="item in list" :key="item.goods_id" @click="confirm1(item)">{{item.goods_name}}
				</navigator>
			</scroll-view>
			<view v-else>
				<view class="title">搜索历史<span class="clear" @click="closeIncon"></span></view>
				<view class="history">
					<navigator v-for="(item,index) in getList" :key="index" @tap="tiaozhuan(item)">
						{{item.goods_name}}
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: false,
				info: "",
				val: "",
				list: [],
				show:false,
				historyList:[],
				// getList:JSON.parse(uni.getStorageSync('list'))|| []
				getList:uni.getStorageSync('list')
			}
		},
		
		methods: {
			focus() {
				uni.hideTabBar()
				this.val=""
				this.show=false
				this.key = true
				this.info = '请输入您想要的商品'
				// uni.setStorageSync('list',JSON.stringify([...newList]));
				this.getList=uni.getStorageSync('list')
				},
			cancel() {
				uni.showTabBar()
				this.val=""
				this.info = ""
				this.key = false
				// uni.setStorageSync('list',JSON.stringify([...newList]));
				// this.getList=JSON.parse(uni.getStorageSync('list'))
				this.getList=uni.getStorageSync('list')
			
			},
			onShow(){
				this.getList=JSON.parse(uni.getStorageSync('list'))|| []
			},
			async input() {
				// console.log(this.val);
				if (this.val!=""){
					this.show=true
				}
				const {
					message
				} = await this.$request({
					url: "/api/public/v1/goods/qsearch",
					data: {
						query: this.val
					}
				});
				if (this.val==""){
					this.show=false
				}
				
				this.list = message;
				// console.log(this.list);
			},
			confirm1(item){
				console.log(item);
				// this.val=item.goods_name
				console.log(item.goods_name)
			    this.historyList.push(item)
			     var newList = Array.from(new Set(this.historyList))
				 console.log('newList',newList);
				 uni.setStorageSync('list',newList);
				 this.getList=uni.getStorageSync('list')
				 console.log(this.getList);
				uni.navigateTo({
					 url: '/pages/list/list?id=' + item.goods_id
				})
				// this.val=""
			},
			confirm(){
				console.log(this.val);
				this.historyList.push(this.val)
				var newList= [...new Set(this.historyList)]
				console.log(newList);
				uni.setStorageSync('list',newList);
				
				uni.navigateTo({
					 url: '/pages/list/list?query=' + this.val
				})
				this.val=""
			},
			closeIncon(){
				this.show=true
			},
			tiaozhuan(item){
				console.log(item);
				uni.navigateTo({
					 url: '/pages/list/list?id=' + item.goods_id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		display: flex;
		flex-direction: column;

		// 搜索框
		.input-wrap {
			display: flex;
			height: 100rpx;
			padding: 20rpx 30rpx;
			background-color: #ea4451;
			box-sizing: border-box;
			position: relative;

			&::before,
			&::after {
				height: 44rpx;
				line-height: 1;
				background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
				background-size: 32rpx;
				background-position: 6rpx center;
				background-repeat: no-repeat;

				position: absolute;
				top: 28rpx;
				z-index: 9;
			}

			&::before {
				content: '搜索';
				display: block;

				width: 100rpx;
				padding: 11rpx 0 10rpx 44rpx;
				box-sizing: border-box;
				color: #666;
				font-size: 24rpx;
				left: 325rpx;
			}

			&::after {
				display: none;
				content: '';
				width: 44rpx;
				left: 40rpx;
			}

			input {
				flex: 1;
				height: 60rpx;
				padding: 0 20rpx 0 64rpx;
				background-color: #fff;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666;
			}

			span.cancle {
				display: none;
				width: 80rpx;
				text-align: right;
				line-height: 60rpx;
				font-size: 27rpx;
				color: #666;
			}
		}

		// 搜索结果
		.content {
			display: none;
			flex: 1;
			padding: 27rpx;
			background-color: #fff;
			position: relative;

			.title {
				font-size: 27rpx;
				line-height: 1;
				color: #333;
			}

			.clear {
				display: block;
				width: 27rpx;
				height: 27rpx;
				float: right;
				background-image: url(http://static.botue.com/ugo/images/clear.png);
				background-size: cover;
			}

			.history {
				padding-top: 30rpx;

				navigator {
					display: inline-block;
					line-height: 1;
					padding: 15rpx 20rpx 12rpx;
					background-color: #ddd;
					font-size: 24rpx;
					margin-right: 20rpx;
					margin-bottom: 15rpx;
					color: #333;
					width: 60rpx;
					 white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					
				}
			}

			.result {
				// display: none;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-color: #fff;

				navigator {
					line-height: 1;
					padding: 20rpx 30rpx;
					font-size: 24rpx;
					color: #666;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		// 获得焦点状态
		&.focused {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			z-index: 9;

			.input-wrap {
				background-color: #eee;

				&::before {
					display: none;
				}

				&::after {
					display: block;
				}
			}

			span.cancle {
				display: block;
			}

			.content {
				display: block;
			}
		}
	}
</style>
